<template>
    <div>
        <Spin size="large" fix v-if="Loading"></Spin>
        <div class="left">
            <vxe-table
                    highlight-hover-row
                    resizable
                    ref="xTree"
                    :tree-config="{children: 'children'}"
                    :data="tableData"
                    :cell-style="cellStyle">
                <vxe-table-column field="yjpz001" title="要件名称" tree-node/>
                <vxe-table-column title="操作" align="center" fixed="right" min-width="100">
                    <template #default="{row}">
                        <Button v-if="row.yjpz007" style="margin-left: 10px" @click="cellClickEvent(row.ss02001Id)">
                            查看要件
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
        <div class="right">
            <vxe-table
                    resizable
                    ref="xTree2"
                    :loading="detailLoading"
                    :data="detailData">
                <vxe-table-column field="yjfm0001" title="文件名称" tree-node/>
                <vxe-table-column title="操作" align="center" fixed="right" min-width="100">
                    <template #default="{row}">
                        <Button type="success" @click="look(row)">查看</Button>
                        <Button type="warning" style="margin-left: 10px" @click="upload(row)">下载</Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
    </div>
</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import {getAction, postAction} from '@/api/request'

    export default {
        name: "application3",
        mixins: [CommonMixin],
        components: {},
        data() {
            return {
                uploadFileData: {},
                url: {
                    list: "/api/ac/subsistence/ss11310Service/list",
                    detail: "/api/ac/subsistence/ss11310Service/detail",
                },
                Loading: false,
                queryParam: {
                    ss11301Id: this.$parent.familyInfo.ss15301Id,
                    yjpz004: "500",
                    yjpz007: "06"
                },
                detailData: [],
                detailLoading: false
            }
        },
        methods: {
            look(row) {
                window.open(row.yjfm0002);
            },
            upload(row) {
                this.downloadImage(row.yjfm0002, row.yjfm0001);
            },

            loadDetailData(ss02001Id) {
                this.detailLoading = true;
                var param = new Object();
                param.ssbh0001 = this.queryParam.ss11301Id;
                param.ssbh0002 = ss02001Id;
                postAction(this.url.detail, param).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        this.detailData = res.data.data;
                    }
                }).finally(() => {
                    this.detailLoading = false;
                })
            },
            cellClickEvent(ss02001Id) {
                this.loadDetailData(ss02001Id);
            },

            list() {
                let that = this;
                that.Loading = true;
                let param = Object.assign({}, this.queryParam);
                let url = this.url.list;
                postAction(url, param).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        that.tableData = res.data.data;
                        this.$nextTick(() => {
                            this.$refs.xTree.setAllTreeExpand(true)
                        })
                    }
                }).finally(() => {
                    that.Loading = false;
                })
            },

            cellStyle({row, rowIndex, column}) {
                if (column.property == 'yjpz001' && row.yjpz006 == '1') {
                    return {
                        color: 'red'
                    }
                }
            }
        },
        created() {
            this.list();
        },
    }
</script>

<style scoped>
    /deep/ .ivu-upload {
        display: inline-block;
    }

    /deep/ th .vxe-cell {
        text-align: center;
    }

    col--tree-node.col-red {
        background-color: red;
        color: #fff;
    }

    .left {
        position: absolute;
        overflow-y: auto;
        width: 50%;
        top: 10px;
        left: 0px;
        height: calc(100%);
    }

    .right {
        position: absolute;
        overflow-y: auto;
        width: 50%;
        top: 10px;
        left: 50%;
        height: calc(100%);
    }

    .bottom {
        height: 40px;
        line-height: 40px;
        bottom: 10px;
        text-align: center;
        position: absolute;
        width: 100%;
    }

    /deep/ .ivu-upload-list {
        display: none;
    }
</style>
